<template>
  <div class="comment-management">
    <el-card>
      <div slot="header">
        <span>评论管理</span>
        <el-input
            v-model="searchKeyword"
            placeholder="搜索评论内容"
            style="width: 200px; float: right;"
            clearable
            @clear="loadComments"
            @keyup.enter="doSearch">
        </el-input>
      </div>

      <el-table :data="filteredComments" style="width: 100%">
        <el-table-column prop="content" label="评论内容">
          <template #default="{row}">
            <div class="comment-content">
              {{ row.content }}
              <el-tag v-if="row.replyCount > 0" size="mini" type="info">
                回复 {{ row.replyCount }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="postTitle" label="所属帖子" width="200">
          <template #default="{row}">
            <router-link :to="`/post/${row.postId}`">{{ row.postTitle }}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column label="状态" width="120">
          <template #default="{row}">
            <el-tag :type="row.status === 'visible' ? 'success' : 'danger'" size="mini">
              {{ row.status === 'visible' ? '可见' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{row}">
            <el-button type="text" @click="toggleStatus(row)">
              {{ row.status === 'visible' ? '隐藏' : '显示' }}
            </el-button>
            <el-button type="text" class="danger-text" @click="deleteComment(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          class="mt-20"
          background
          layout="prev, pager, next"
          :total="totalComments"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      totalComments: 35,
      commentList: [
        {
          id: 1,
          content: '这篇文章非常实用！',
          postId: 1,
          postTitle: '猫咪日常护理指南',
          time: '2023-08-15 10:00',
          status: 'visible',
          replyCount: 2
        },
        {
          id: 2,
          content: '疫苗间隔时间需要调整',
          postId: 2,
          postTitle: '狗狗疫苗全攻略',
          time: '2023-08-14 15:30',
          status: 'hidden',
          replyCount: 0
        }
      ]
    }
  },
  computed: {
    filteredComments() {
      return this.commentList.filter(comment =>
          comment.content.includes(this.searchKeyword) ||
          comment.postTitle.includes(this.searchKeyword)
      )
    }
  },
  methods: {
    loadComments() {
      // 模拟加载评论数据
      console.log('加载评论数据...')
    },
    doSearch() {
      this.loadComments()
    },
    toggleStatus(comment) {
      comment.status = comment.status === 'visible' ? 'hidden' : 'visible'
      this.$message.success('状态已更新')
    },
    deleteComment(comment) {
      this.$confirm(`确定删除这条评论吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.commentList = this.commentList.filter(c => c.id !== comment.id)
        this.$message.success('评论已删除')
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.loadComments()
    }
  }
}
</script>

<style scoped>
.comment-content {
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.danger-text {
  color: #F56C6C;
}

.mt-20 {
  margin-top: 20px;
}
</style>